<template>
  <div>
    <div class="button-box">
      <a-button type="plain" @click="toList" class="d-a-center">返回</a-button>
      <!-- <a-button
        type="primary"
        @click="addService"
        class="d-a-center"
        style="margin-left: 30px"
        >添加字段</a-button
      > -->
    </div>
    <!-- 头部 -->
    <!-- <a-button style="margin-bottom: 20px"  type="plain" @click="toList" class="d-a-center">返回</a-button> -->
    <!-- <pre>{{selectedRowKeys}}</pre> -->
    <!-- 列表 -->
    <a-table :columns="columns" :data-source="renderData" bordered :loading="loading" :pagination="false" @change="handleTableChange">
      <template #operation="{ record }">
        <a-button type="link" @click="add(record.id)">编辑</a-button>
      </template>
    </a-table>

    <!-- 编辑服务表单 -->
    <options v-model:visible="visible" :id="id" @closeModal="closeModal" />
  </div>
</template>
<script>
import { reactive, ref, watch, computed, createVNode, toRefs } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { serviceColumnsArr, dataObj } from './data'
import { useTable } from '@/hooks'

import options from './components/options.vue'
import router from '@/router/index.js'
import { selectOrganServiceListByOrganId } from '@/api/content/translate'
import { useRoute } from 'vue-router'

import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

export default {
  components: {
    options
  },
  setup() {
    // 状态列表

    const columns = serviceColumnsArr

    const data = reactive(dataObj)

    //必须有括号 建议箭头函数 防止深拷贝
    const route = useRoute()
    const getParams = () => ({
      organId: route.query.id || ''
    })
    const { renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
      api: selectOrganServiceListByOrganId,
      getParams,
      usePagination: false
    })

    handleSearch(1)

    // 查看
    const add = id => {
      console.log('触发')
      data.id = id
      data.visible = true
    }

    const closeModal = () => {
      // data.id = ""
      // data.visible = false
      handleSearch()
    }
    const toList = () => {
      router.back()
    }

    return {
      ...toRefs(data),
      columns,
      renderData,
      formModel,
      loading,
      pagination,
      handleSearch,
      handleTableChange,
      toList,
      add,
      closeModal
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
